<template>
    <transition appear name="side_anime">
        <div>
            <h1>角色列表</h1>
            <el-divider></el-divider>
            <div class="btn">
                <el-button
                size="mini"
                type="success"
                icon="el-icon-view"
                @click="checkPermission">查看所有权限</el-button>
            </div>
            
            <el-table
            :data="rolesList"
            style="width: 100%">
                <el-table-column
                    prop="id"
                    label="角色ID"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="角色名称(英文)"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="nameZh"
                    label="角色名称(中文)"
                    width="180">
                </el-table-column>
                <el-table-column label="角色权限">
                <template #default="scope">
                    <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-view"
                    @click="handleCheck(scope.$index, scope.row)">查看</el-button>
                    <!-- <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                </template>
                </el-table-column>
            </el-table>
        </div>
    </transition>
</template>

<script>
import {checkRoles} from '../../api/api'

export default {
    data(){
        return {
            rolesList:[]
        }
    },
    mounted(){
        this.getRolesList();
    },
    methods: {
        handleEdit(index,row) {
            console.log(index,row)
            this.dialogVisible = true
        },

        //获取角色列表
        getRolesList() {
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
            'satoken':token
            }
            checkRoles(header).then(response => {
                console.log('请求成功',response)
                this.rolesList = response.data
            })
        },

        //查看角色权限
        handleCheck(index,row) {
            this.$router.push({
                "name":"rolePermission",
                "params":{
                    "id":row.id
                }
            })
        },

        //查看所有权限
        checkPermission() {
            this.$router.push({
                "name":"permission"
            })
        }
    }
}
</script>

<style scoped>
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}

.permission-tree {
    margin-bottom: 30px;
}
.btn {
    text-align: left;
    margin-bottom: 20px;
}
</style>

